import React, {Component} from 'react'
import './index.css'
import { login } from '@/redux/actions/user'
import {connect} from "react-redux";

class Login extends Component{
    state = {
     user: {
         name: ''
     }
    }

    componentDidMount(){}

    // 登录
    login = ()=> {
        const { name } = this.state.user
        if(!name) {
            alert('请输入账号')
            return
        }
        this.props.login({ name })
        this.props.history.push(`/layout`)
    }

    // 获取用户信息
    inputChange = (e) =>{
        const { value } = e.target
        this.setState({ user: { name: value }})
    }
    render(){
        return (
            <div className='login-container'>
                <div className="form-wrapper">
                    <div style={{'marginBottom': '10px'}}>
                        <label htmlFor="">账号：</label>
                        <input onChange={e => this.inputChange(e, '111')} type="text" placeholder='请输入账号名'/>
                    </div>
                    <div align='center'>
                        <button onClick={this.login}>登录</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    state => ({ user: state.user }),//映射状态
    {login}//映射操作状态的方法
)(Login)
